<template>
    <div>
        <!--轮播图区域-->
        <swiper :lunbotuList="lunbotuList" :isfull="true"></swiper>
        <div class="HomeContainer">
            <div style="display: flex; justify-content:space-between;">
                <router-link to="/home/goodslist" class="HomeNav">
                    <div class="content">
                        <span class="fa fa-ticket fa-3x"></span>
                    </div>
                    <p class="HomeP">门票订购</p>
                </router-link>
                <router-link to="/member" class="HomeNav">
                    <div class="content">
                        <span class="fa fa-address-card fa-3x"></span>
                    </div>
                    <p class="HomeP">个人中心</p>
                </router-link>
            </div>
            <div style="display: flex; justify-content:space-between;">
                <router-link to="/ticket" class="HomeNav">
                    <div class="content">
                        <span class="fa fa-map fa-3x"></span>
                    </div>
                    <p class="HomeP">门票信息</p>
                </router-link>
                <router-link to="/home/goodsdesc/81" class="HomeNav">
                    <div class="content">
                        <span class="fa fa-calendar-check-o fa-3x"></span>
                    </div>
                    <p class="HomeP">攻略指南</p>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    import { Toast } from 'mint-ui'
    import swiper from '../subcomponents/swiper.vue'

    export default {
        data(){
            return{
                lunbotuList:[{url:1 , img:'http://127.0.0.1:3000/public/img/lunbo3.jpg'},
                    {url:2 ,img:'http://127.0.0.1:3000/public/img/lunbo1.jpg'},
                    {url:3 ,img:'http://127.0.0.1:3000/public/img/lunbo2.jpg'},
                    {url:4 ,img:'http://127.0.0.1:3000/public/img/lunbo4.jpg'},
                ],     //保存轮播图数组
            }
        },
        methods:{
        },
        components:{
            swiper
        }
    }
</script>

<style lang="scss" scoped>
    .mui-grid-view.mui-grid-9 .mui-table-view-cell{
        border: none;
    }

    .fa{
        color: #fff;
        text-shadow: 3px 3px 5px #333;
    }
    .HomeNav{
        width: 100%;
        height: 200px;
        background-color: #fff;
        border: 1px solid #eee;
        /*display: flex;*/
        /*justify-content: center;*/
        /*align-items: center;*/
        background-color: #fff;

    }
    .HomeContainer{
        width: 100%;
        height: 500px;
    }
    .content{
        width: 100px;
        height: 100px;
        background-color: red;
        border-radius: 50%;
        box-shadow: 3px 3px 3px #cccccc;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        left: 25%;
        top:20%;
    }
    .HomeP{
        position: relative;
        left: 30%;
        bottom: -28%;
        font-size: 20px;
        font-weight: bold;
        color: #333;
    }
</style>
